<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <base href="<%=basePath%>">
	
  <meta charset="UTF-8">
		<title>考勤信息录入</title>
		<link rel="stylesheet" href="./layui/css/layui.css" />
		<script type="text/javascript" src="./layui/layui.js" ></script>
		<script type="text/javascript" src="./jquery-3.3.1/jquery-3.3.1.js" ></script>
		<script type="text/javascript" src="./jquery-3.3.1/jquery-3.3.1.min.js" ></script>
		
	</head>
	<style>
	
	</style>
	<body>
		<div class="layui-container">
			<header class="layui-header">
				<fieldset class="layui-elem-field layui-field-title">
					<legend>考勤信息录入(请于每天00:00之前录入)</legend>
				</fieldset>
			</header>
			<div class="layui-row">
				<label class="layui-form-label">请选择日期</label>
				<div class="layui-input-inline">
					<input type="date" class="layui-input" id="inputAttDate"/>
				</div>
				<div class="layui-input-inline">
					<button class="layui-btn" id="selectAttInfoBtn" data-type="reload">确定日期</button>
				</div>
			</div>
		
				<table class="layui-table" id="inputAttTable"  lay-filter="inputAttTable"></table>
				<script type="text/html" id="toolbarCommit">
  					<div class="layui-btn-container">
    					<button class="layui-btn layui-btn-sm" lay-event="getCheckData">提交选中行数据</button>
  					</div>
				</script>
				<script type="text/javascript">
					layui.use(['table','laydate'],function(){
						var table = layui.table,
						laydate = layui.laydate;
						laydate.render({
							elem:'#inputAttDate'
						});
						table.render({
							elem:'#inputAttTable',
							url:'inputAttInfoServlet',
							toolbar:'#toolbarCommit',
							limit:10,
							limits:[5,10,20,50],
							height: 500,
							id:'dataAttInfoTable',
							cols:[[
								{type:'radio'},
								{field:'AttId', width:80,title:'考勤ID',sort:true},
								{field:'name', width:80,title:'姓名'},
								{field:'College', width:100,title:'学院'},
								{field:'major', width:80,title:'专业'},
								{field:'tClass', width:80,title:'班级'},
								{field:'dNub', width:60, title:'宿舍',edit:'text'},
								{field:'qingjia', width:60, title:'请假',edit: 'text'},
								{field:'qingjiaTime', width:90,title:'请假时间', edit: 'text'},
								{field:'wangui', width:60, title:'晚归',edit: 'text'},
								{field:'wanguiTime', width:90, title:'晚归时间',edit: 'text'},
								{field:'weigui', width:60, title:'未归',edit: 'text'},
								{field:'remarks', width:120, title:'备注',edit: 'text'}
							]],
							page:true,
							response: {
				      		statusCode: 200 //重新规定成功的状态码为 200，table 组件默认为 0  
				    	}
					    ,parseData: function(res){ //将原始数据解析成 table 组件所规定的数据
					      return {
					        "code": res.status, //解析接口状态
					        "msg": res.message, //解析提示文本
					        "count": res.datasize, //解析数据长度
					        "data": res.rows.item //解析数据列表
					      };
					    }
						});
						table.on('toolbar(inputAttTable)',function(obj){
							var checkStatus  = table.checkStatus(obj.config.id);//获取选中行状态
							switch(obj.event){
								case 'getCheckData':
									var data = checkStatus.data;//获取选中行数据
									data = JSON.stringify(data);
									
									console.log("data:"+data.wanguiTime);
									//只有选中当前记录才能提交当前修改的信息
									if(data.length > 2){
										layer.msg(data);
										//更新数据方法
										inputAttInfoUpdata(data,table);
									}else{
										layer.msg("请选择数据！");
									}
							};
						});
							//通过日期筛选考勤数据
					var active = {
						reload : function(){
							//获取日期选择input 
							var inputAttDate = $('#inputAttDate');
							console.log(inputAttDate.val());
							//重载时弹个窗   在set定时器一个定时器
							var index = layer.msg('查询中...请稍后...',{icon:16,time:false,shade:0});
							setTimeout(function(){
								table.reload('dataAttInfoTable',{
									page:{
										curr:1//重新从第一页开始
									},
									where:{
										date:inputAttDate.val() //将值传到后台		
									}
								});
								layer.close(index); //关闭msg
							},1500);
						}
					}	
					//监听reload button
					$('#selectAttInfoBtn').on('click',function(){
						var type = $(this).data('type');
						active[type] ? active[type].call(this) : '';
					});
					});
						
					//更新数据 param : 修改后的数据
					function inputAttInfoUpdata(attData,table){
						//获取日期选择input 
						var inputAttDate = $('#inputAttDate');
						$.ajax({
							type:"post",
							url:"updataAloneAttInfoServlet",
							async:true,
							data:{attData:attData},
							success : function(data){
								//更新成功之后需要刷新一下当前页面
								//selectAttInfoForDate(date);
								if(data == 1){
									var index  =layer.msg('更新成功!正在刷新页面。',{icon:16,time:false,shade:0});
									setTimeout(function(){
										table.reload('dataAttInfoTable',{
											where:{
												date:inputAttDate.val() //将值传到后台		
											}
										});
										layer.close(index);
									},1500);
								}else{
									layer.msg('update error');
								}		
							},
							error : function(xhr, status, errMsg){
								layer.msg("xhr"+xhr+"status:"+status+"errMsg:"+errMsg);
								console.log("xhr"+xhr+"status:"+status+"errMsg:"+errMsg);
							}
						});
					}
				</script>
		</div>
	</body>
</html>
